// function getData() {
//   axios.get('/category/list').then(({ data: res }) => {
//     console.log(res.data.list)

//     // console.log(unameArr)

//     renderLeft(res.data.list)
//   })
// }
// getData()
renderLeft()

// // 渲染左边栏
function renderLeft() {
  axios.get('/category/list').then(({ data: res }) => {
    // console.log(res.data.list)
    if (res.status === 200) {
      const newArrleft = res.data.list.map((item, index) => {
        return `
              <div class="left_item" data-id='${index}'>
                <p>${item.name}</p>
                </div>
                `
      })
      document.querySelector('.left_list').innerHTML = newArrleft.join('')
    }

    // 点击事件
    const first = document.querySelector('.left_item')
    first.classList.add('active')
    const left_list = document.querySelector('.left_list')
    left_list.addEventListener('click', function (e) {
      if (e.target.tagName === 'P') {
        // console.log(e.target.parentNode.dataset.id)
        const active = document.querySelector('.active')

        if (active) {
          active.classList.remove('active')
        }

        e.target.parentNode.classList.add('active')

        renderRight(e.target.parentNode.dataset.id)
        // renderRight()
      }
    })
  })
}

// 渲染右边
function renderRight(index) {
  axios.get('/category/list').then(({ data: res }) => {
    // console.log(res.data.list[index].children)
    // console.log(res.data.list[index].children)
    if (res.data.list[index].children) {
      const rightList = res.data.list[index].children.map((ele, index) => {
        //   console.log(ele)
        return `
              <div class="right_item">
                <img
                  src="${ele.image.external_url}"
                  alt=""
                />
                <p>${ele.name}</p>
              </div>
              `
      })
      document.querySelector('.right_sc').innerHTML = rightList.join('')
    } else {
      document.querySelector('.right_sc').innerHTML = ''
    }
  })
}

// 热门推荐
axios.get('/category/list').then(({ data: res }) => {
  // console.log(res.data.list[index].children)
  // console.log(res.data.list[index].children)
  const rightList = res.data.list[0].children.map((ele, index) => {
    //   console.log(ele)
    return `
            <div class="right_item">
              <img
                src="${ele.image.external_url}"
                alt=""
              />
              <p>${ele.name}</p>
            </div>
            `
  })
  document.querySelector('.right_sc').innerHTML = rightList.join('')
})
